<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>{{ typeName }}列表</el-breadcrumb-item>
      <el-breadcrumb-item>
        {{ isEdit ? `${typeName}详情` : `编辑${typeName}详情` }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
      <h2>基本信息</h2>
      <el-button type="primary" @click="preview">预览</el-button>
    </div>
    <el-form :model="info" label-position="top">
      <el-form-item label="作品作者名称">
        <span>{{ info.creators && info.creators[0].nickname }}</span>
      </el-form-item>
      <el-form-item label="作品作者ID">
        <span>{{ info.creators && info.creators[0].uuid }}</span>
      </el-form-item>
      <el-form-item
        :label="typeName + '名称'"
        v-if="isVideo || isArticle || isMaterail || isTopic || isPicture"
      >
        <span>{{ info.title }}</span>
      </el-form-item>
      <el-form-item label="关联话题" v-if="isOpinion">
        <span>{{ info.parentTitle }}</span>
      </el-form-item>
      <el-form-item :label="this.typeName + '内容'" v-if="isVideo || isMaterail">
        <player :videoId="vid" :width="width" :height="height"></player>
      </el-form-item>
      <el-form-item :label="typeName + '封面'" v-if="isVideo || isArticle || isMaterail">
        <div>
          <img :src="info.cover" style="width:200px;heigh:200px" />
        </div>
      </el-form-item>
      <el-form-item label="图片" v-if="isPicture">
        <div class="imgBox">
          <div class="picture" v-for="(item, index) in info.images" :key="index">
            <img :src="item" :preview="index" />
          </div>
        </div>
      </el-form-item>
      <el-form-item :label="this.typeName + '详情'">
        <el-form-item>
          <el-row :gutter="10">
            <el-col :span="24">
              <editor
                v-model="info.content"
                :cv-id-path="info.videoId"
                style="height: 100%"
                :disabled="!($permission && $permission.includes('work:detail:edit'))"
              ></editor>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form-item>
      <h2>{{ typeName }}属性</h2>
      <el-form-item :label="typeName + '分类'" v-if="isVideo || isArticle || isMaterail || isTopic">
        <span>{{ info.category }}</span>
      </el-form-item>
      <el-form-item :label="typeName + '标签'" v-if="!isTopic && !isOpinion">
        <span v-for="(item, index) in info.tags" :key="index">{{ item }}、</span>
      </el-form-item>
      <el-form-item
        :label="
          `运营精细化标签(${!info.operateTags ? 0 : info.operateTags.length}/${MAX_TAG_COUNT})`
        "
      >
        <div class="opeTag">
          <el-tag
            v-for="(item, index) in info.operateTags"
            :key="index"
            size="medium"
            closable
            @close="delTag(index)"
          >
            {{ item }}
          </el-tag>
          <el-input
            v-model="newVal"
            @keydown.native="del"
            placeholder="按回车键Enter创建标签"
            @keyup.enter.native="addTag(newVal)"
            :disabled="isEdit"
          ></el-input>
        </div>
        <!-- 可选标签 -->
        <div class="recomTag">
          <p>推荐标签：</p>
          <el-tag
            effect="dark"
            disable-transitions
            size="medium"
            v-for="(item, index) in info.allTags"
            :key="index"
            @click="clickAddTag(item)"
          >
            {{ item }}
          </el-tag>
        </div>
      </el-form-item>
      <el-form-item label="是否精选" v-if="isVideo || isPicture || isArticle">
        <el-radio v-model="info.delicated" :label="1" :disabled="isEdit">是</el-radio>
        <el-radio v-model="info.delicated" :label="0" :disabled="isEdit">否</el-radio>
      </el-form-item>
      <el-form-item label="匿名发布" v-if="isTopic || isOpinion">
        <span>{{ info.anonymous }}</span>
      </el-form-item>
      <div v-if="isMaterail && info.material != null">
        <el-form-item label="授权类型">
          <span v-for="(item, index) in info.material.grantInfos" :key="index">
            {{ item.grantType }}
          </span>
        </el-form-item>
        <el-form-item label="第三方权利说明">
          <span>{{ info.material.declaration }}</span>
        </el-form-item>
        <el-form-item label="素材文件格式">
          <span>{{ info.material.ext }}</span>
        </el-form-item>
        <el-form-item label="使用软件要求">
          <span>{{ info.material.requirement }}</span>
        </el-form-item>
      </div>
      <el-form-item label="作品中的职责" v-if="isVideo">
        <span>{{ info.role }}</span>
      </el-form-item>
      <el-form-item label="素材" v-if="isVideo">
        <span v-if="info.marterial != null">{{ info.material.filename }}</span>
        <el-button type="primary" v-if="info.marterial != null" @click="toMaterial(info.workId)">
          素材详情
        </el-button>
      </el-form-item>
      <el-form-item label="共同创作者" v-if="isVideo">
        <span v-for="(item, index) in info.commonAuthor" :key="index">{{ item.commonAuthor }}</span>
      </el-form-item>
      <el-form-item label="作品原创属性" v-if="isVideo || isArticle || isPicture || isOpinion">
        <span>{{ info.original }}</span>
      </el-form-item>
      <el-form-item label="允许转载" v-if="isOpinion">
        {{ info.repostable }}
      </el-form-item>
      <el-form-item label="首次提审时间">
        <span>{{ info.publishAt }}</span>
      </el-form-item>
      <el-form-item label="最新更新时间">
        <span>{{ info.updatedAt }}</span>
      </el-form-item>
      <el-form-item label="首次上线时间">
        <span>{{ info.onlineAt }}</span>
      </el-form-item>
      <div v-if="isMaterail && info.material != null">
        <h2>价格设置</h2>
        <el-form-item label="价格设置">
          <el-tabs v-model="activeName" type="card" @tab-click="setPrice">
            <el-tab-pane label="普通商业授权" name="first"></el-tab-pane>
            <el-tab-pane label="影视授权" name="second"></el-tab-pane>
            <el-tab-pane label="非商业授权" name="third"></el-tab-pane>
            <el-tab-pane label="其他" name="fourth"></el-tab-pane>
          </el-tabs>
          <div class="priceDiv1">
            <p class="font">全球无限次/一年</p>
            <input
              type="number"
              v-model="yearPrice0"
              min="0"
              :disabled="isEdit"
              v-if="this.tabType == '普通商业授权'"
            />
            <input
              type="number"
              v-model="yearPrice1"
              min="0"
              :disabled="isEdit"
              v-if="this.tabType == '影视授权'"
            />
            <input
              type="number"
              v-model="yearPrice2"
              min="0"
              :disabled="isEdit"
              v-if="this.tabType == '非商业授权'"
            />
            <input
              type="number"
              v-model="yearPrice3"
              min="0"
              :disabled="isEdit"
              v-if="this.tabType == '其他'"
            />
          </div>
          <div class="priceDiv2">
            <p class="font">全球无限次/永久</p>
            <input
              type="number"
              v-model="foreverPrice0"
              min="0"
              :disabled="isEdit"
              v-if="this.tabType == '普通商业授权'"
            />
            <input
              type="number"
              v-model="foreverPrice1"
              min="0"
              :disabled="isEdit"
              v-if="this.tabType == '影视授权'"
            />
            <input
              type="number"
              v-model="foreverPrice2"
              min="0"
              :disabled="isEdit"
              v-if="this.tabType == '非商业授权'"
            />
            <input
              type="number"
              v-model="foreverPrice3"
              min="0"
              :disabled="isEdit"
              v-if="this.tabType == '其他'"
            />
          </div>
        </el-form-item>
      </div>
      <h2>审核设置</h2>
      <el-form-item label="审核设置">
        <el-radio-group v-model="info.checked" class="set">
          <el-radio :label="1" :disabled="isEdit">审核通过</el-radio>
          <el-radio :label="2" @change="inputReason" :disabled="isEdit">
            审核不通过
            <el-input
              v-model="info.reason"
              v-if="(showReason = true)"
              placeholder="填写审核不通过原因"
              :disabled="isEdit || info.checked == 1"
            ></el-input>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <edit-bar v-if="!isEdit">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="$tabs.close()">取消</el-button>
      </edit-bar>
    </el-form>
    <el-dialog :visible="preViewShow" width="100" :before-close="handleClose">
      <el-row class="el-row" :gutter="20">
        <el-col><p class="warn">提示：该链接仅供预览，不可作为正式链接使用</p></el-col>
        <el-col :span="8">
          <p>
            PC版本:
            <a href="#" @click="previwJimu">{{ jimuUrl }} /preview/article/{{ info.workId }}</a>
          </p>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20" class="el-row">
        <el-col :span="8">
          <p>
            移动端版本:
            <a href="#">123</a>
          </p>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="el-row">
        <el-col :span="8">
          <p>二维码预览:</p>
        </el-col>
      </el-row> -->
    </el-dialog>
  </div>
</template>

<script>
  import EditMixins from 'mixins/Edit';
  import Editor from 'comp/Editor';
  import EditBar from 'comp/EditBar';
  import Player from 'comp/Player';
  import { mapGetters } from 'vuex';
  export default {
    mixins: [EditMixins],
    data() {
      return {
        MAX_TAG_COUNT: 8,
        preViewShow: false,
        activeName: 'first',
        tabType: '',
        newVal: '',
        foreverPrice0: 0,
        yearPrice0: 0,
        foreverPrice1: 0,
        yearPrice1: 0,
        foreverPrice2: 0,
        yearPrice2: 0,
        foreverPrice3: 0,
        yearPrice3: 0,
        vid: '',
        workId: '',
        jimuUrl: process.env.VUE_APP_JIMU_URL,
        // 视频播放器的宽高
        width: '300px',
        height: '300px',
      };
    },
    components: {
      Editor,
      EditBar,
      Player,
    },
    computed: {
      isVideo() {
        return this.info.workType == 1;
      },
      isArticle() {
        return this.info.workType == 2;
      },
      isPicture() {
        return this.info.workType == 3;
      },
      isMaterail() {
        return this.info.workType == 4;
      },
      isTopic() {
        return this.info.workType == 5;
      },
      isOpinion() {
        return this.info.workType == 6;
      },
      typeName() {
        const zhStr = ['视频', '文章', '图片', '素材', '话题', '观点'];
        return zhStr[this.info.workType - 1];
      },
      isEdit() {
        return this.$route.params.operateType == 'edit' ? false : true;
      },
      ...mapGetters(['$permission']),
    },
    methods: {
      getInfo() {
        if (!this.id || this.infoGetting) return;
        // 如果不是这些页面的话
        if (
          ![
            'WorkVideoDetail',
            'WorkArticleDetail',
            'WorkPictureDetail',
            'WorkMaterailDetail',
            'WorkTopicDetail',
            'WorkOpinionDetail',
          ].includes(this.$route.name)
        )
          return;
        this.infoGetting = true;
        this.$service
          .WorkDetail({ id: this.id })
          .then((res) => {
            this.info = { ...res };
            this.afterContentRequest();
            this.vid = this.info.videoId;
            this.workId = this.info.workId;
            this.info.original = this.$ENUMS.original[this.info.original];
            this.info.anonymous = this.$ENUMS.anonymous[this.info.anonymous];
            this.info.repostable = this.$ENUMS.repostable[this.info.repostable];
            if (this.info.material != null) {
              for (var i = 0; i < this.info.material.grantInfos.length; i++) {
                if (this.info.material.grantInfos[i].grantType == 0) {
                  this.yearPrice0 = this.info.material.grantInfos[i].yearPrice;
                  this.foreverPrice0 = this.info.material.grantInfos[i].foreverPrice;
                  this.info.material.grantInfos[i].grantType = '普通商业授权';
                }
                if (this.info.material.grantInfos[i].grantType == 1) {
                  this.yearPrice1 = this.info.material.grantInfos[i].yearPrice;
                  this.foreverPrice1 = this.info.material.grantInfos[i].foreverPrice;
                  this.info.material.grantInfos[i].grantType = '影视授权';
                }
                if (this.info.material.grantInfos[i].grantType == 2) {
                  this.yearPrice2 = this.info.material.grantInfos[i].yearPrice;
                  this.foreverPrice2 = this.info.material.grantInfos[i].foreverPrice;
                  this.info.material.grantInfos[i].grantType = '非商业授权';
                }
                if (this.info.material.grantInfos[i].grantType == 3) {
                  this.yearPrice3 = this.info.material.grantInfos[i].yearPrice;
                  this.foreverPrice3 = this.info.material.grantInfos[i].foreverPrice;
                  this.info.material.grantInfos[i].grantType = '其它';
                }
              }
              this.tabType = '普通商业授权';
            }
          })
          .catch((err) => {})
          .finally(() => {
            this.infoGetting = false;
          });
      },
      inputReason() {
        this.showReason = true;
      },
      preview() {
        this.preViewShow = true;
      },
      handleClose() {
        this.preViewShow = false;
      },
      setPrice(tab) {
        this.tabType = tab.label;
      },
      clickAddTag(tag) {
        if (this.isEdit) {
          return;
        }
        if (this.info.operateTags.length >= 8) {
          this.$message.error('够了够了,标签足够多了!');
          return;
        }
        if (!this.hasIt(this.info.operateTags, tag)) {
          this.info.operateTags.push(tag);
        }
      },
      addTag(tag) {
        if (this.isEdit) {
          return;
        }
        if (this.info.operateTags.length >= 8) {
          this.$message.error('够了够了,标签足够多了!');
          return;
        }
        if (!this.hasIt(this.info.operateTags, tag)) {
          this.$service
            .WorkCreateTag({
              tagName: tag,
            })
            .then((res) => {});
          this.info.operateTags.push(tag);
          this.info.allTags.push(tag);
        }
      },
      delTag(index) {
        if (this.isEdit) {
          return;
        }
        this.info.operateTags.splice(index, 1);
      },
      /**
       * 删除最后一个
       */
      del(evt) {
        if (evt.keyCode === 8 && this.newVal === '') {
          this.info.operateTags.pop();
          this.$emit('input', this.info.operateTags);
        }
      },
      hasIt(list, val) {
        return !!list.find((tag) => tag === val);
      },
      save() {
        if (this.info.checked != 1) {
          if (this.info.reason == '') {
            this.$message.warning('请输入审核不通过原因');
            return;
          }
        }
        var materialForm = [];
        materialForm.push(
          { grantType: 0, yearPrice: this.yearPrice0, foreverPrice: this.foreverPrice0 },
          { grantType: 1, yearPrice: this.yearPrice1, foreverPrice: this.foreverPrice1 },
          { grantType: 2, yearPrice: this.yearPrice2, foreverPrice: this.foreverPrice2 },
          { grantType: 3, yearPrice: this.yearPrice3, foreverPrice: this.foreverPrice3 },
        );
        this.$service
          .WorkSave(
            {
              id: this.info.id,
              checked: this.info.checked,
              reason: this.info.reason,
              materialGrantForm: materialForm,
              operateTags: this.info.operateTags.map((tag) => tag).join(','),
              delicated: this.info.delicated,
            },
            JSON_HEADER,
          )
          .then((res) => {
            this.getInfo();
            this.$message.success('保存成功');
          });
      },
      toMaterial(workId) {
        var workId = workId;
        this.$service.WorkDetail({ workId: workId }).then((res) => {});
      },
      afterContentRequest() {
        this.setVideoBoxHeight();
      },
      /**
       * 设置视频播放器的高度 16:9
       */
      setVideoBoxHeight() {
        setTimeout(() => {
          let contentDocument = document.querySelectorAll('.tox-edit-area__iframe')[0]
            .contentDocument;
          let videoBoxes = contentDocument.querySelectorAll('.content-video-cover');
          if (videoBoxes.length > 0) {
            videoBoxes.forEach((box) => {
              if (box.src.indexOf('x-oss-process=image/resize') == -1) {
                box.src += '?x-oss-process=image/resize,w_711,h_400,m_fill';
              } else {
                box.src = box.src.replace(',w_335,h_188,m_fill', ',w_711,h_400');
              }
            });
          }
          contentDocument.querySelector(`#tinymce`).addEventListener('click', (e) => {
            if (e.target.getAttribute('class') === 'content-video-cover') {
              const previewUrl = this.jimuUrl + `/preview/article/${this.workId}`;
              window.open(previewUrl);
            }
          });
        }, 500);
      },
      previwJimu() {
        const previewUrl = this.jimuUrl + '/preview/article/' + this.info.workId;
        const popup = window.open(previewUrl);
        setTimeout(() => {
          popup.postMessage(this.info, previewUrl);
        }, 1000);
      },
    },
  };
</script>

<style lang="less" scoped>
  h2 {
    padding-left: 20px;
    border-left: 5px solid #495464;
    line-height: 1;
    margin-bottom: 10px;
  }
  .info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  /deep/ .el-form-item__label {
    font-size: 16px;
    padding: 10px 5px !important;
    margin-bottom: 10px;
    border-radius: 3px 3px 0 0;
    background: #ced6e2;
    color: #222;
    width: 100%;
    line-height: 24px;
  }
  .edit-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    left: 210px;
    background: white;
    padding: 20px;
    border-top: 1px solid #ccc;
    z-index: 11;

    /deep/ .el-button {
      margin-left: 10px;
    }
  }
  .set {
    margin-bottom: 40px;
  }
  .priceDiv1 {
    display: flex;
    margin-bottom: 10px;
  }
  .priceDiv2 {
    display: flex;
    margin-bottom: 10px;
  }
  .font {
    font-size: 16px;
    padding-right: 10px;
  }
  .recomTag {
    display: flex;
    flex-wrap: wrap;
  }
  .opeTag {
    height: 50px;
    margin-bottom: 10px;
    border: 1px solid #dcdfe6;
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
  }
  /deep/ .el-tag {
    margin-right: 10px;
    font-size: 14px;
  }
  /deep/ .el-tag--medium {
    height: 38px;
    line-height: 38px;
    margin-bottom: 5px;
  }
  .imgBox {
    display: flex;
    flex-wrap: wrap;
  }
  .picture {
    margin-right: 15px;
    margin-bottom: 10px;
    height: 150px;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  /deep/.el-col-8 {
    width: 100%;
    margin-bottom: 20px;
  }
  /deep/ .el-input--mini .el-input__inner {
    height: 37px;
    line-height: 37px;
  }
  .warn {
    color: red;
    margin-bottom: 10px;
  }
</style>
